<template>
  <div style="overflow: auto; position: relative; z-index: 2" @click="closeMenu">
    <!--  顶部table  -->

    <div class="manageStatus" v-if="props.data.data_assets == '1'">
      <!-- <img src="@/assets/image/hasManage.png" alt="" class="hasManage" /> -->
      <span class="name">资产已被管理</span>
    </div>

    <!-- <div class="navigation">
      <span class="title">数据源详情</span>
      <div class="navigationContent" @click="jumpToModule('1')">基础信息</div>
      <div class="navigationContent" @click="jumpToModule('2')">数据表</div>
      <div class="navigationContent" @click="jumpToModule('3')">数据流向关系</div>
    </div> -->

    <div class="titleContent isTop" ref="main1">
      <div class="leftContent">
        <div class="block"></div>
        <span>基础信息</span>
      </div>
    </div>

    <el-table class="editTable" :data="[data]" fit show-overflow-tooltip width="100%">
      <el-table-column prop="datasourceName" label="名称" min-width="100px"></el-table-column>
      <el-table-column prop="type" label="类型" min-width="100px"></el-table-column>
      <el-table-column prop="username" label="用户名" min-width="100px"></el-table-column>
      <el-table-column prop="status" label="连接状态" min-width="100px">
        <template #default="{ row }">
          {{ row.status == 0 ? '正常' : '异常' }}
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="修改时间" min-width="180px">
        <template #default="{ row }">
          {{ row.updateTime ? dayjs(row.updateTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="cityName" label="地市" />
      <el-table-column prop="url" label="连接信息" class="auto-width" min-width="300px" />
    </el-table>

    <div class="titleContent" ref="main2">
      <div class="leftContent">
        <div class="block"></div>
        <span>数据表</span>
      </div>
    </div>

    <div class="content-box">
      <!--  内部左侧边栏  -->
      <div class="aside" v-loading="tableNameLoading">
        <ul class="">
          <li
            v-for="tableName in tableNameList"
            :class="{ 'li-active': tableName === activeTable }"
            @click="
              () => {
                handleClickTable(tableName)
              }
            "
            @contextmenu.prevent.native="openMenu($event, tableName)"
          >
            <el-tooltip class="box-item" effect="dark" :content="tableName" placement="top-start">
              {{ tableName }}
            </el-tooltip>
          </li>
        </ul>
      </div>
      <div class="main">
        <!-- <div v-if="showType == 'table'" class="m-3">
          <el-button type="primary" :disabled="tableData.length == 0" @click="handleSave">保存</el-button>
        </div> -->
        <el-table
          v-if="showType == 'table'"
          class="animate__animated animate__fadeIn"
          :data="tableData"
          v-loading="tableLoading"
          height="calc(100% - 0px)"
        >
          <el-table-column v-if="showColumn('COLUMN_NAME')" prop="COLUMN_NAME" label="列名"></el-table-column>
          <el-table-column v-if="showColumn('DATA_TYPE')" prop="DATA_TYPE" label="数据类型"></el-table-column>
          <el-table-column v-if="showColumn('DATA_LENGTH')" prop="DATA_LENGTH" label="数据长度"></el-table-column>
          <el-table-column v-if="showColumn('NULLABLE')" prop="NULLABLE" label="能否为空"></el-table-column>
          <el-table-column v-if="showColumn('COMMENTS')" prop="COMMENTS" label="注解"></el-table-column>
          <el-table-column v-if="showColumn('isKeyword')" prop="isKeyword" label="是否关键字"></el-table-column>
          <el-table-column v-if="showColumn('MONGODB_FIELD')" prop="MONGODB_FIELD" label="列名"></el-table-column>
        </el-table>
        <!--  代码编辑器 & 右侧边栏, 选择es ck  -->
        <div v-if="showType === 'coder'" style="height: 100%; display: flex">
          <MappingCoder :data="p_data" :type="p_type" @mappingData="getMappingData" style="width: calc(100% - 200px)" />
          <ul class="es-list">
            <li v-if="p_type === 'ES'" :class="{ isActive: es._id === checkEs }" v-for="es in esList">
              <el-popconfirm
                title="确认?"
                @confirm="
                  () => {
                    handleCheckES(es)
                  }
                "
              >
                <template #reference>
                  <div>{{ es.datasourceName }}</div>
                </template>
              </el-popconfirm>
            </li>
            <li v-if="p_type === 'CK'" :class="{ isActive: ck._id === checkCk }" v-for="ck in ckList">
              <el-popconfirm
                title="确认?"
                @confirm="
                  () => {
                    handleCheckCk(ck)
                  }
                "
              >
                <template #reference>
                  <div>{{ ck.datasourceName }}</div>
                </template>
              </el-popconfirm>
            </li>
            <li v-if="p_type === 'PG'" :class="{ isActive: pg._id === checkPg }" v-for="pg in pgList">
              <el-popconfirm
                title="确认?"
                @confirm="
                  () => {
                    handleCheckPg(pg)
                  }
                "
              >
                <template #reference>
                  <div>{{ pg.datasourceName }}</div>
                </template>
              </el-popconfirm>
            </li>

            <li v-if="p_type === 'MySQL'" :class="{ isActive: mysql._id === checkPg }" v-for="mysql in mysqlList">
              <el-popconfirm
                title="确认?"
                @confirm="
                  () => {
                    handleCheckPg(mysql)
                  }
                "
              >
                <template #reference>
                  <div>{{ mysql.datasourceName }}</div>
                </template>
              </el-popconfirm>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!--  引擎选择弹窗, ck时需要选择引擎  -->
    <el-dialog :close-on-click-modal="false" :model-value="visible" title="选择引擎" width="300px" @close="handleClose">
      <el-form ref="formRef" :model="form">
        <el-form-item
          label="引擎"
          prop="engine"
          :rules="[{ required: true, message: '请选择', trigger: ['blur', 'change'] }]"
        >
          <el-select v-model="form.engine">
            <el-option
              v-for="engine in engineList"
              :key="engine"
              :label="engine.dict_label"
              :value="engine.dict_value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="handleOk" :loading="btnLoading">确定</el-button>
        <el-button @click="handleClose" type="info">取消</el-button>
      </template>
    </el-dialog>
    <!--  引擎选择弹窗,Flink时需要选择引擎  -->
    <el-dialog
      :close-on-click-modal="false"
      :model-value="flinkVisible"
      title="选择类型"
      width="300px"
      @close="handleFlinkClose"
    >
      <el-form ref="flinkFormRef" :model="flinkForm">
        <el-form-item
          label="类型"
          prop="type"
          :rules="[{ required: true, message: '请选择', trigger: ['blur', 'change'] }]"
        >
          <el-radio-group v-model="flinkForm.type">
            <el-radio v-if="props.data.type != 'ClickHouse'" label="source">Source</el-radio>
            <el-radio v-if="props.data.type != 'SQLServer' && props.data.type != 'MySQL'" label="sink">Sink</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="handleFlinkOk" :loading="btnLoading">确定</el-button>
        <el-button @click="handleFlinkClose" type="info">取消</el-button>
      </template>
    </el-dialog>
    <TableStarrocktsConfig
      v-model:visible="isShowTableStarrocktsDialog"
      :data="tableStarrocktsData"
      @create="tableStarrocktsCreate"
    />
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import {
  findTableName,
  findColumnName,
  AddRulesColumn,
  FindRulesColumn,
  createCkTable,
  getCkEngine,
  createFlinkSql,
  createPGTable,
  secrecySave,
  secrecyInfo
} from '@/api/datasourceCenter'
import MappingCoder from './mappingCoder.vue'
import TableStarrocktsConfig from './tableStarrocktsConfig.vue'
import { createEsIndex, findDataSourceFlow, createMysqlTable } from '@/api/datasourceCenter'
import { ElMessage } from 'element-plus'
import { Promotion, Close, FullScreen } from '@element-plus/icons-vue'
// import MySQL from '@/assets/icon/mysql.png'
// import Oracle from '@/assets/icon/oracle.png'
// import ElasticSearch from '@/assets/icon/elasticsearch.png'
// import MongoDB from '@/assets/icon/mongodb.png'
// import Kafka from '@/assets/icon/kafka.png'
// import ClickHouse from '@/assets/icon/clickhouse.png'

// import FlowComponents from './flowComponents.vue'

const props = defineProps({
  data: {
    type: Object,
    default: {},
    required: true
  },
  list: {
    type: Array,
    default: [],
    required: true
  },
  esList: {
    // 右侧边栏es列表选项
    type: Array,
    default: [],
    required: true
  },
  ckList: {
    // 右侧边栏ck列表选项
    type: Array,
    default: [],
    required: true
  },
  pgList: {
    // 右侧边栏pg列表选项
    type: Array,
    default: [],
    required: true
  },
  mysqlList: {
    // 右侧边栏mysql列表选项
    type: Array,
    default: [],
    required: true
  }
})
const tableNameList = ref([]) // 左侧table list
const tableData = ref([]) // 底部table数据源
const activeTable = ref('') // 左侧当前选中table
const tableLoading = ref(false) // 底部table loading
const showMenu = ref(false) // 右键菜单显示
const isShowTableStarrocktsDialog = ref(false)
const tableStarrocktsData = ref({})

const flowRef = ref(null)

const form = ref({
  // 弹窗form
  engine: ''
})
const formRef = ref() // 弹窗form ref
const flinkFormRef = ref() // 弹窗form ref
const flinkForm = ref({ type: '' }) // 弹窗form ref
const visible = ref(false) // 弹窗visible
const flinkVisible = ref(false) // 弹窗visible

const flowData = ref({}) // 数据流向关系

const fullScreenFlow = ref(false) // 全屏

const main1 = ref(null)
const main2 = ref(null)
const main3 = ref(null)

// 左侧table list点击
const handleClickTable = async (table) => {
  showType.value = 'table' // 显示table 还是 coder
  activeTable.value = table // 当前选中table
  tableLoading.value = true // 底部table loading 开启
  // 凑接口参数
  let mapList = {}
  let fieldDescriptions = {}
  // await FindRulesColumn({ ...props.data, database: props.data.datasourceName, tableName: activeTable.value }).then(
  //   (res) => {
  //     mapList = res.data?.map || []
  //     fieldDescriptions = res.data?.fieldDescription || []
  //   }
  // )
  await findColumnName({ ...props.data, tableName: activeTable.value })
    .then((res) => {
      if (props.data.type.toLowerCase() === 'mongodb') {
        tableData.value = res.data[0].COLUMN_NAME.map((it) => ({
          MONGODB_FIELD: it,
          UPDATE_MONGODB_FIELD: ''
        }))
        tableData.value.map((item) => {
          item.SERVICE_ATTRIBUTE = item?.MONGODB_FIELD ? mapList[item.MONGODB_FIELD] : ''
          item.UPDATE_MONGODB_FIELD = item?.MONGODB_FIELD ? fieldDescriptions[item.MONGODB_FIELD] : ''
        })
      } else {
        tableData.value = res.data ? res.data.slice() : []
        tableData.value.map((item) => {
          item.SERVICE_ATTRIBUTE = item?.COLUMN_NAME ? mapList[item.COLUMN_NAME] : ''
        })
      }
    })
    .finally(() => {
      tableLoading.value = false
    })
  // await secrecyInfo(activeTable.value, props.data._id, props.data.username).then((res) => {
  //   console.log(tableData.value)
  //   tableData.value.forEach((item) => {
  //     if (res.data.secrecyOne.includes(item.COLUMN_NAME)) {
  //       item.CONFIDENTIALITY_LEVEL = 'one'
  //     } else if (res.data.secrecyTwo.includes(item.COLUMN_NAME)) {
  //       item.CONFIDENTIALITY_LEVEL = 'two'
  //     } else if (res.data.secrecyThree.includes(item.COLUMN_NAME)) {
  //       item.CONFIDENTIALITY_LEVEL = 'three'
  //     } else if (res.data.secrecyFour.includes(item.COLUMN_NAME)) {
  //       item.CONFIDENTIALITY_LEVEL = 'four'
  //     }
  //   })
  // })
}
const engineList = ref([]) // 引擎选项列表
const tableNameLoading = ref(false)

const fullScreen = () => {
  console.log('全屏')
  fullScreenFlow.value = !fullScreenFlow.value

  console.log(flowRef.value)
  setTimeout(() => {
    flowRef.value?.changeSize()
  }, 300)
}

const init = () => {
  console.log('props.data')
  console.log(props.data)

  tableNameLoading.value = true
  findTableName(props.data)
    .then((res) => {
      // 左侧 table list 初始化
      tableNameList.value = res.data ? res.data.slice() : []
    })
    .finally(() => {
      tableNameLoading.value = false
    })
  // getCkEngine().then((res) => {
  //   engineList.value = res.data
  // })

  // findDataSourceFlow(props.data._id).then((res) => {
  //   console.log(res)
  //   let data = {
  //     nodes: res.data.nodes.map((item) => {
  //       let id = item._id || item.id
  //       return {
  //         // ...item,
  //         id,
  //         businessType: item.businessType || '',
  //         datasourceName: item.datasourceName || item.name,
  //         data: {
  //           type: item.type || '',
  //           username: item.username || '',
  //           color: props.data._id === id ? '#ffa502' : '#1e90ff',
  //           activeNode: props.data._id === id
  //         }
  //       }
  //     }),
  //     edges: res.data.edges
  //   }
  //   flowData.value = data
  // })
}
// 控制不同数据库类型显示列
const showColumn = function (field) {
  switch (props.data.type.toLowerCase()) {
    case 'oracle':
    case 'sqlserver':
    case 'mysql':
    case 'clickhouse':
    case 'dameng':
    case 'duckdb':
    case 'starrocks':
    case 'doris':
      return ['COLUMN_NAME', 'DATA_TYPE', 'DATA_LENGTH', 'NULLABLE', 'COMMENTS'].includes(field)
      break
    case 'elasticsearch':
      return ['COLUMN_NAME', 'DATA_TYPE', 'isKeyword'].includes(field)
      break
    case 'mongodb':
      return ['MONGODB_FIELD', 'UPDATE_MONGODB_FIELD'].includes(field)
    default:
      return true
      break
  }
}
const top = ref(0) // 右键菜单top
const left = ref(0) // 右键菜单left
const p_data = ref({}) // 子组件参数
const p_type = ref('') // 子组件参数
const temp = ref({}) // 数据暂存
const mapping = ref() // coder 里的代码
const getMappingData = function (data) {
  mapping.value = data
}
// 右键弹窗
const openMenu = function (e, tableName) {
  if (document.body.offsetHeight - e.pageY < 220) {
    top.value = e.pageY - 220
  } else {
    top.value = e.pageY //这个应该是相对于整个浏览器页面的y坐标，左上角为坐标原点（0,0）
  }
  left.value = e.pageX //这个应该是相对于整个浏览器页面的x坐标，左上角为坐标原点（0,0）
  temp.value = { ...props.data }
  temp.value.tableName = tableName
  showMenu.value = true //显示菜单
  activeTable.value = tableName
}
//关闭菜单
const closeMenu = function () {
  showMenu.value = false //关闭菜单
}
const showType = ref('table') // table/coder
const dialogType = ref('createMapping') // createMapping(生成mapping) / createTable(生成表结构)
// 右键菜单 菜单项被点击
const handleClickMenu = function (type) {
  closeMenu()
  p_type.value = type
  if (type == 'CK') {
    dialogType.value = 'createMapping'
    findColumnName({ ...props.data, tableName: activeTable.value }).then((res) => {
      const keyWord = res.data?.find((item) => (item.KEYWORD ? item.KEYWORD.toLowerCase() === 'y' : false))?.COLUMN_NAME
      ckParams.value = { ...temp.value }
      ckParams.value.primaryKey = keyWord
      visible.value = true
    })
  } else if (type == 'ES') {
    p_data.value = { ...temp.value }
    showType.value = 'coder'
  } else if (type == 'Flink') {
    console.log(props.data.type)
    if (
      props.data.type == 'Oracle' ||
      props.data.type == 'SQLServer' ||
      props.data.type == 'ClickHouse' ||
      props.data.type == 'MySQL' ||
      props.data.type == 'Doris' ||
      props.data.type == 'Starrocks'
    ) {
      flinkVisible.value = true
    }
  } else if (type == 'PG') {
    findColumnName({ ...props.data, tableName: activeTable.value }).then((res) => {
      console.log(res)
      const key = res.data.find((item) => item.KEYWORD == 'Y')
      let params = {
        _id: props.data._id,
        primaryKey: key ? key.COLUMN_NAME : '',
        tableName: activeTable.value
      }
      console.log(params)
      p_data.value = params
      p_type.value = 'PG'
      showType.value = 'coder'
      // createPGSql(params).then((res) => {
      //   console.log(res)
      //   showType.value = 'coder'
      //   p_data.value = res.data
      // })
    })
  } else if (type == 'MySQL') {
    findColumnName({ ...props.data, tableName: activeTable.value }).then((res) => {
      console.log(res)
      const key = res.data.find((item) => item.KEYWORD == 'Y')
      let params = {
        _id: props.data._id,
        primaryKey: key ? key.COLUMN_NAME : '',
        tableName: activeTable.value
      }
      console.log(params)
      p_data.value = params
      p_type.value = 'MySQL'
      showType.value = 'coder'

      // createMysqlTable(params).then((res) => {
      //   console.log(res)
      //   showType.value = 'coder'
      //   p_data.value = res.data
      // })

      // createPGSql(params).then((res) => {
      //   console.log(res)
      //   showType.value = 'coder'
      //   p_data.value = res.data
      // })
    })
  } else if (type == 'starrockts') {
    p_data.value = {
      databaseId: props.data._id,
      tableName: activeTable.value,
      type: props.data.type
    }
    p_type.value = 'starrockts'
    showType.value = 'coder'
  } else if (type == 'starrocktsConfig') {
    tableStarrocktsData.value = {
      ...props.data,
      databaseId: props.data._id,
      tableName: activeTable.value,
      type: props.data.type
    }
    isShowTableStarrocktsDialog.value = true
  }
}
const tableStarrocktsCreate = (data) => {
  p_data.value = { ...data, type: props.data.type }
  p_type.value = 'starrocktsConfig'
  showType.value = 'coder'
}

const jumpToModule = (index) => {
  const el = index === '1' ? main1.value : index === '2' ? main2.value : main3.value
  el.scrollIntoView({ behavior: 'smooth' })
}

// es列表中被选中项
const checkEs = ref('')
// 选择ES
const handleCheckES = function (es) {
  checkEs.value = es._id
  createEsIndex({
    id: es._id,
    requestBody: JSON.parse(JSON.stringify(mapping.value).replace(/\\n/g, '').replace(/\\t/g, '')),
    tableName: activeTable.value
  }).then((res) => {
    ElMessage.success(res.data)
  })
}
const handleClose = function () {
  formRef.value.resetFields()
  visible.value = false
}
const handleFlinkClose = function () {
  flinkFormRef.value.resetFields()
  flinkVisible.value = false
}
const ckParams = ref({}) // ck参数暂存
const checkCk = ref('') // ck列表中被选中项
const checkPg = ref('') // pg列表中被选中项
const btnLoading = ref(false) // 引擎弹窗确定按钮loading
// 生成接口所需参数
const handleCheckCk = function (ck) {
  checkCk.value = ck._id
  ckParams.value.ckInfo = ck
  dialogType.value = 'creatTable'
  handleOk()
}
const handleCheckPg = function (pg) {
  checkPg.value = pg._id
  dialogType.value = 'creatTable'
  createPGTable({
    ...pg,
    tableName: activeTable.value,
    requestBody: mapping.value
  }).then((res) => {
    ElMessage.success(res.msg)
  })
}
// 生成ck表结构
const handleOk = function () {
  if (dialogType.value === 'createMapping') {
    // 生成mapping
    formRef.value.validate().then(() => {
      btnLoading.value = true
      ckParams.value.engine = form.value.engine
      p_data.value = ckParams.value
      showType.value = 'coder'
      handleClose()
      btnLoading.value = false
    })
  } else {
    createCkTable({
      ...ckParams.value,
      requestBody: mapping.value
    }).then((res) => {
      ElMessage.success(res.msg)
    })
  }
}
const handleFlinkOk = () => {
  flinkFormRef.value?.validate((valid) => {
    if (valid) {
      btnLoading.value = true
      showType.value = 'coder'
      p_type.value = 'Flink'
      createFlinkSql(flinkForm.value.type, { ...temp.value })
        .then((res) => {
          p_data.value = { code: res.data }
        })
        .finally(() => {
          flinkVisible.value = false
          btnLoading.value = false
        })
    } else {
      return false
    }
  })
}
// 保存table
const handleSave = function () {
  const params = {
    ...props.data,
    database: props.data.datasourceName,
    datasourceName: props.data.datasourceName,
    tableName: activeTable.value,
    map: {}
  }
  if (props.data.type.toLowerCase() === 'mongodb') {
    params.fieldDescription = {}
    tableData.value.forEach((item) => {
      params.map[item.MONGODB_FIELD] = item.SERVICE_ATTRIBUTE
      params.fieldDescription[item.MONGODB_FIELD] = item.UPDATE_MONGODB_FIELD
    })
  } else {
    tableData.value.forEach((item) => {
      params.map[item.COLUMN_NAME] = item.SERVICE_ATTRIBUTE
    })
  }
  tableLoading.value = true
  AddRulesColumn(params)
    .then((res) => {
      ElMessage.success(res.msg)
    })
    .finally(() => {
      tableLoading.value = false
    })
  console.log(tableData.value)
  let secrecyParams = {
    dataSourceId: props.data._id,
    table: activeTable.value,
    username: props.data.username,
    secrecyFour: tableData.value.filter((item) => item.CONFIDENTIALITY_LEVEL == 'four').map((item) => item.COLUMN_NAME),
    secrecyThree: tableData.value
      .filter((item) => item.CONFIDENTIALITY_LEVEL == 'three')
      .map((item) => item.COLUMN_NAME),
    secrecyTwo: tableData.value.filter((item) => item.CONFIDENTIALITY_LEVEL == 'two').map((item) => item.COLUMN_NAME),
    secrecyOne: tableData.value.filter((item) => item.CONFIDENTIALITY_LEVEL == 'one').map((item) => item.COLUMN_NAME)
  }
  secrecySave(secrecyParams)
}
init()
defineExpose({ closeMenu })
</script>

<style lang="scss" scoped>
.manageStatus {
  position: absolute;
  top: 0;
  right: 6px;
  display: flex;
  align-items: center;
  background: #7bed9f;
  padding: 6px 12px;
  border-radius: 10px;
  .hasManage {
    width: 30px;
    margin-right: 3px;
  }
  .name {
    font-size: 18px;
    font-weight: 600;
    margin-right: 10px;
    color: #fff;
    font-family: DingTalk JinBuTi;
  }
}

.navigation {
  position: fixed;
  // 垂直居中
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background-color: #6c5ce7;
  color: #fff;
  border-radius: 6px;
  padding: 4px 8px 12px 8px;
  opacity: 0.3;
  //鼠标移入时透明度变为1
  &:hover {
    opacity: 1;
  }
  .title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    font-family: AlimamaShuHeiTi-Bold;
  }
  .navigationContent {
    width: 80px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 3px;
    background-color: #a29bfe;
    color: #fff;
    margin-bottom: 10px;
    user-select: none;
    cursor: pointer;
    font-size: 12px;
    //强制不换行
    white-space: nowrap;
    font-family: DingTalk JinBuTi;
  }
  .navigationContent:last-child {
    margin-bottom: 0;
  }
}
* {
  //--el-border-color-lighter: #3d3d3d;
  //--el-table-row-hover-bg-color: #707070;
  //--el-table-bg-color: #1a1a1a;
}

:deep(.el-table:not(.el-table--border) .el-table__cell) {
  //background-color: #1a1a1a;
  //border-color: var(--el-border-color-lighter);
  //color: #a2a2a2;
}

.content-box {
  margin: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% - 220px);
  //border: 2px solid #525252;

  .aside {
    width: 280px;
    height: 100%;
    overflow: auto;
    border: 1px solid #b3aeff;
    margin-right: 12px;
    border-radius: 8px;
    background-color: #fff;
    font-size: 12px;

    ul {
      li {
        padding: 5px 15px;
        cursor: pointer;
      }
      li:hover {
        background-color: #b3aeff;
      }
      .li-active {
        background-color: #b3aeff;
        color: #ffffff;
      }
    }
  }
  .main {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
}
:deep(.el-loading-mask) {
  //background-color: rgba(33, 33, 33, .7);
}

.menu {
  position: absolute;
  top: 0;
  left: 0;
}

.contextmenu {
  margin: 0;
  background: #2a2a42;
  z-index: 3000;
  position: fixed; //关键样式设置固定定位
  list-style-type: none;
  padding: 10px 0;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #b4b4b4;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}

.contextmenu li {
  margin: 0;
  padding: 5px 16px;
  cursor: pointer;
  line-height: 26px;
}
.contextmenu li:hover {
  background: #4f4f7a;
}
.es-list {
  width: 200px;

  li {
    padding: 5px 10px;
    cursor: pointer;
  }
  li:hover {
    //background-color: #525252;
  }
}
:global(.el-popper.is-light) {
  //background-color: #1a1a1a;
  //border-color: #525252;
}
:global(.el-popper.is-light .el-popper__arrow::before) {
  //background-color: #1a1a1a;
  //border-color: #525252;
}
:deep(.el-table__inner-wrapper) {
  //height: 100% !important;
}
.auto-width {
  width: auto;
}
$dialogBg: #1a1a1a;
$dialogColor: #b4b4b4;
:deep(.el-dialog) {
  //background-color: $dialogBg !important;
  //border-color: #525252;
  //color: $dialogColor
}
:deep(.el-dialog__header) {
  //background-color: $dialogBg !important;
  //color: $dialogColor;
}
:deep(.el-dialog__title) {
  //color: $dialogColor !important;
}
:deep(.el-dialog__body) {
  //background-color: $dialogBg !important;
  //color: $dialogColor
}
.titleContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 6px;
  margin: 20px 0;
  &.isTop {
    margin-top: 0;
  }
  .leftContent {
    display: flex;
    align-items: center;
  }
  .block {
    width: 8px;
    height: 22px;
    background-color: #b3aeff;
    margin-right: 10px;
    border-radius: 3px;
  }
  span {
    font-size: 20px;
    font-weight: 600;
    font-family: AlimamaShuHeiTi-Bold;
  }
}
.flowContainer {
  height: 600px;
  :deep(.minimap) {
    position: absolute;
    z-index: 3;
    left: 10px;
    bottom: 10px;
    border: 1px solid #e2e2e2;
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  }
  &.fullScreen {
    position: fixed;
    top: 0;
    left: 0;
    :deep(.minimap) {
      position: absolute;
      z-index: 3;
      left: 10px;
      bottom: 80px;
      border: 1px solid #e2e2e2;
      background-color: #fff;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    }
    .titleContent {
      padding: 0 30px;
    }

    z-index: 999999;
    background-color: #fff;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    padding: 8px 0;
    background-color: #fff;
  }
}
// .editTable{
//   --el-bg-color: none;
//   //去除背景色
//   --el-table-header-bg-color: none;
//   --el-table-header-color: none;
//   --el-table-border-color: none;
//   --el-table-row-hover-bg-color: none;
//   background: none;
//   .el-table__header-wrapper{
//     background: none;
//   }
//   .el-table__header{
//     background: none;
//   }
//   .el-table__body{
//     background: none;
//   }
//   .el-table__row{
//     background: none;
//   }
//   .el-table__row:hover{
//     background: none;
//   }
//   .el-table__row--striped{
//     background: none;
//   }
//   .el-table__row--striped:hover{
//     background: none;
//   }
//   .el-table__column{
//     background: none;
//   }
//   .el-table__column--selection{
//     background: none;
//   }
//   .el-table__column--selection .cell{
//     background: none;
//   }
//   .el-table__column--selection .cell .el-checkbox{
//     background: none;
//   }
//   tr{
//     background: none !important;
//   }
// }
</style>
